<template>
  <div class="FoodIconList">
    <div class="FoodIconList_content">
      <router-link class="icon_box" v-for="item in list" :key="item.id" :to="item.path">
        <img :src="item.image_url" alt>
        <span>{{item.icon_text}}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FoodSwiper",
  props: {
    list: Array 
  },
  data: function() {
    return {};
  }
};
</script>

<style scoped>
.FoodIconList {
  height: 3.5rem;
  border-bottom: 0.2rem solid #ebeced;
  margin-bottom: 0.2rem;
  background: #ffffff;
}
.FoodIconList_content {
  height: 100%;
  width: 100%;
}
.icon_box {
  font-size: 0.24rem;
  width: 25%;
  float: left;
}
.icon_box span {
  display: block;
  color: #666666;
  letter-spacing: 0.2px;
  font-family: PingFangSC-Regular;
  line-height: 0.33rem;
}
.icon_box img {
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.32rem;
}
</style>